<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="hd.css" />
    <script src="hd.js" defer></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet" />
  </head>

  <body>
    <main>
      <header>
        <label>
          <div class="icon"></div>
          <input type="checkbox" hidden />
        </label>
      </header>

      <menu>
        <ul>
          <li>
            <div class="fa">
              <i class="fa-regular fa-user"></i>
            </div>
            user
          </li>

          <li>
            <div class="fa">
              <i class="fa-regular fa-images"></i>
            </div>
            images
          </li>
          <li>
            <div class="fa">
              <i class="fa-regular fa-compass"></i>
            </div>
            compass
          </li>
          <li>
            <div class="fa">
              <i class="fa-regular fa-life-ring"></i>
            </div>
            life Ring
          </li>
        </ul>
      </menu>
    </main>
  </body>
</html>
